<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>系统首页</title>
    <link rel="stylesheet" href="css/yangshi.css">
    <script src="js/jquery3.6.js"></script>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="web-app">
    <div class="header" >
        <div class="logo">北工商后台管理</div>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <p class="user-name user-p">
                    <span class="rasim"><img :src="'../'+user.headImg" class="layui-nav-img"></span>
                    <span>{{user.userName}}</span>
                </p>
                <dl class="layui-nav-child">
                    <dd>
                        <a href="system/basic.html" target="_blank">基本资料</a>
                    </dd>
                    <dd>
                        <a href="">安全设置</a>
                    </dd>
                    <dd>
                        <a href="../login2.html">重新登录</a>
                    </dd>
                </dl>
            </li>

        </ul>
    </div>
    <div id="">
        <div class="left-div">
            <div class="hide-div yagax" v-for="menu in menus">
                <p class="bilalIsmi kkl" @click="toIframe(menu.nodeURL)" >{{menu.displayName}}</p>
                <span class="more"></span>
                <ul class="karim">
                    <li @click="toIframe(m.nodeURL)" v-for="m in menu.childLists">{{m.displayName}}</li>
                </ul>
            </div>
        </div>
        <div class="right-div float">
            <iframe height="100%" width="100%" :src="iframe">

            </iframe>
        </div>
    </div>
<!--    <div class="footer">底部固定区域</div>-->
</div>
<script>
    const vue = {
        data(){
            return{
                menus: selMenu(),
                user:selloginUser(),
                iframe:'personnel/personnel.html',

            }
        },
        methods:{
            toIframe:function (iframe) {
                console.log(iframe)
                this.iframe = iframe;
            }
        }
    }
    let app = Vue.createApp(vue).mount("#web-app")

    /**
     * 查询系统菜单
     */

    function selMenu(){
        let list;
        $.ajax({
            type:"post",
            url: "../MenuServlet?flag=selMenu",
            dataType:"json",
            async:false,
            success:function (json){
                console.log(json)
                list = json
                if (json.message == "no"){
                    var bilal = confirm("滚去登录");
                    if (bilal){
                        location.href="../login2.html"
                    }else {
                        $("body").html("<a href='../login2.html' class='login-no'>登录</a>")
                    }
                }
            }
        })
        return list;
    }

    /**
     * 获取登录用户
     */
    function selloginUser(){
        let user ;
        $.ajax({
            type: "post",
            url: "../UserServlet?flag=selloginUser",
            dataType: "json",
            async: false,
            success: function (json) {
                console.log(json)
                user = json
                if (json.message == "no"){
                    var bilal = confirm("滚去登录");
                    if (bilal){
                        location.href="../login2.html"
                    }else {
                        $("body").html("<a href='../login2.html' class='login-no'>登录</a>")
                    }
                }
            }
        })
        return user;
    }


    /**
     * 菜单效果
     * @param el this
     */
    let arrFlag = [];
    for (let i = 0; i < $(".more").length; i++){
        arrFlag[i] = false;
    }
    for (let i = 0; i < $(".hide-div").length; i++){
        (function (m){
            $(".bilalIsmi").eq(m).click(function (){
                $(".karim").eq(m).stop().slideToggle();
                $(".bilalIsmi").css("border-left","0px solid transparent");
                $(this).css("borderLeft","5px solid #009688");
                arrFlag[m] = !arrFlag[m];
                if (arrFlag[m]){
                    $(".more").eq(m).addClass("rotate");
                }else {
                    $(".more").eq(m).removeClass("rotate");
                }
            })
        })(i)
    }

    /**
     * 点击个人中心显示
     */
    $(".user-name").click(function (){
        $(".layui-nav-child").slideToggle();
        $(".user-name").css("border-bottom","5px solid #009688")
    })
    $(".layui-nav-child").mouseleave(function (){
        $(".layui-nav-child").slideUp();
        $(".user-name").css("border-bottom","5px solid transparent")
    })

</script>
</body>
</html>